<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <title>用户管理</title>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <!-- START 左侧查询框 -->
    <div class="col-lg-3 col-md-4 col-sm-5">
      <!-- 路径导航 -->
      <ol class="breadcrumb">
        <li><a href="${ctx}/workbench"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
        <li class="active">用户管理</li>
      </ol>
      <!-- /路径导航 -->

      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">查询条件</h3>
        </div>

        <div class="panel-body">
          <form class="form-horizontal" id="search-form" action="${ctx}/user" role="form">

            <div class="row">
              <div class="col-xs-12">
                <input type="text" class="form-control" id="user-name" name="search_LIKE_name" value="${param.search_LIKE_name }" placeholder="用户名">
              </div>
            </div>
            <br>

            <button type="submit" class="btn btn-default" id="search-id">
              <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询
            </button>

            <a class="btn btn-default pull-right" href="${ctx}/user">
              <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 清空
            </a>
          </form>
        </div>
      </div>
    </div>
    <!-- END 左侧查询框 -->

    <!-- START 右侧内容 -->
    <div id="constant-panel" class="col-lg-9 col-md-8 col-sm-7">

      <!-- 警告框 -->
      <c:if test="${not empty message}">
        <div class="alert alert-${message.state} alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">关闭</span>
          </button>
            ${message.message}
        </div>

      </c:if>
      <!-- ／警告框 -->

      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><span class="glyphicon glyphicon-th" aria-hidden="true"></span> 用户管理</h3>
        </div>
        <div class="panel-body">
          <!-- 响应式表格:将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格.-->
          <!-- 其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失 ［已改为在所有屏幕大小都显示］ -->
          <div class="table-responsive">
            <table class="table table-hover">
              <thead>
              <tr>
                <th class="table-sidebar" width="60">管理</th>
                <th>登录名</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>注册时间</th>
              </tr>
              </thead>
              <tbody>
              <c:forEach items="${users.content}" var="user">
                <tr>
                  <td class="table-sidebar">
                    <a class="text-info" href="${ctx}/user/update/${user.id}">
                      <span class="glyphicon glyphicon-edit" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="修改"></span>
                    </a>
                    |
                    <a class="text-danger" href="${ctx}/user/delete/${user.id}" onclick="return confirm('是否删除该用户？')">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="删除"></span>
                    </a>
                  </td>
                  <td>${user.loginName}</td>
                  <td>${user.name}</td>
                  <td>${user.email}</td>
                  <td><fmt:formatDate value="${user.registerDate}" pattern="yyyy年MM月dd日"/></td>
                </tr>
              </c:forEach>
              </tbody>
            </table>
          </div>
          <div class="pull-right">
            <tags:pagination page="${users}" paginationSize="5"/>
          </div>
          <div class="pull-left">
            <a class="btn btn-default" href="${ctx}/user/create">添加用户</a>
          </div>
        </div>

      </div>
    </div>
    <!-- END 右侧内容 -->
  </div>
</div>

<!-- 以下开始 加载JS动态效果 -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${ctx}/static/jquery/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${ctx}/static/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function () {

    $('[data-toggle="tooltip"]').tooltip();

  });
</script>
</body>
</html>